#preson_info{
    position: relative;
    width: 45%;
    height: 100%;
    float: left;
    #preson_info_top{
        position: relative;
        width: 100%;
        height: 35%;
        #info_img{
            display: block;
            position: absolute;
            top: 20px;
            left: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 50%;
            animation-delay: 0.3s;
            background-image: url('../images/mao.jpg');
            background-size: 100%;
            background-position: center;
        }
        #info_text01{
            width: 60%;
            height: 100%;
            position: absolute;
            top: 0px;
            right: 0px;
            box-sizing: border-box;
            padding: 40px 0px;
            #p_title{
                color: black;
                text-align: left;
                text-indent: 10px;
            }
            .iconf{
                display: block;
                width: 60px;
                height: 80px;
                float: left;
                color: black;
                margin-left: 15px;
                margin-right: 15px;
                font-family: '华文新魏';
            }
            .iconf:nth-child(1){
                animation-delay: 0s;
            }
            .iconf:nth-child(2){
                animation-delay: 0.1s;
            }
            .iconf:nth-child(3){
                animation-delay: 0.2s;
            }
            .iconf:nth-child(4){
                animation-delay: 0.3s;
            }
            .iconf:nth-child(5){
                animation-delay: 0.4s;
            }
            .iconf:nth-child(6){
                animation-delay: 0.5s;
            }
            .iconf:nth-child(7){
                animation-delay: 0.6s;
            }
        }
    }
    #preson_info_bottom{
        position: relative;
        widows: 100%;
        height: 65%;
    }
}
#preson_info_right{
    width: 55%;
    height: 100%;
    float: left;
}
#chart_box{
    position: relative;
    width: 100%;
    height: 390px;
    left: -100px;
    animation-delay: 0.8s;
    #char{
        position: relative;
        width: 100%;
        height: 390px;
        float: left;
    }
}
#info_bottom_title01{
    width: 250px;
    height: 40px;
    margin-top: 35px;
    background-image: url('../images/title.png');
    color: black;
    font-size: 23px;
    line-height: 40px;
    font-family: '华文新魏';
    animation-delay: 0.2s;
}
#info_bottom_title02{
    float: left;
    width: 250px;
    height: 40px;
    background-image: url('../images/title.png');
    color: black;
    margin-left: 50px;
    font-size: 23px;
    line-height: 40px;
    font-family: '华文新魏';
    animation-delay: 0.9s;
}
#skill{
    float: left;
    width: 88%;
    height: 232px;
    box-sizing: border-box;
    margin-left: 50px;
    margin-top: 10px;
    text-align: left;
    line-height: 32px;
//  font-family: '华文新魏';
    font-size: 18px;
    animation-delay: 1.2s;
}
#info_bottom_text{
    position: relative;
    width: 100%;
    height: 330px;
    margin: 0 auto;
    margin-top: 15px;
    left: 40px;
    .row{
        width: 50%;
        height: 40px;
        float: left;
        margin-bottom: 15px;
        line-height: 40px;
        font-size: 18px;
        color: black;
        .text_title{
            display: block;
            width: 34%;
            height: 100%;
            text-align: left;
            float: left;
            color: #000000;
            font-weight: 700;
        }
        .text{
            display: block;
            float: left;
            width: 66%;
            height: 100%;
            text-align: left;
            color: white;
        }
    }
    div:nth-child(1){animation-delay: 0s;}
    div:nth-child(2){animation-delay: 0.1s;}
    div:nth-child(3){animation-delay: 0.2s;}
    div:nth-child(4){animation-delay: 0.3s;}
    div:nth-child(5){animation-delay: 0.4s;}
    div:nth-child(6){animation-delay: 0.5s;}
}



.img_box{
    position: absolute;
    width: 50%;
    height: 50%;
    cursor: pointer;
    box-sizing: border-box;
    border: 4px solid transparent;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: all 0.6s;
}

.img_box01{top:0px;left:0px;animation-delay: 0s;}
.img_box02{top:0px;left:50%;animation-delay: 0.2s;}
.img_box03{top:50%;left:0px;animation-delay: 0.4s;}
.img_box04{top:50%;left:50%;animation-delay: 0.6s;}

.img{
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    transition: all 0.6s;
}

.html_img01{background-image: url('../images/tianmulai_html.jpg');}
.html_img02{background-image: url('../images/guaiwu_html.jpg');}
.html_img03{background-image: url('../images/tianmao_html.jpg');}
.html_img04{background-image: url('../images/fanke_html.jpg');}

.php_img01{background-image: url('../images/fnji_php.jpg');}
.php_img02{background-image: url('../images/yhc_php.jpg');}
.php_img03{background-image: url('');}
.php_img04{background-image: url('');}

.info{
    display: none;
    width: 650px;
    height: 650px;
    text-align: left;
    box-sizing: border-box;
    position: absolute;
    top: -150px;
    left: 600px;
    color: black;
    font-size: 25px;
    font-family: '华文新魏';
    animation-delay: 0.5s;
    padding: 60px 30px;
    line-height: 50px;
    cursor: auto;
    span{
        font-size: 20px;
    }
    .botton{
        display: block;
        position: absolute;
        float: left;
        width: 200px;
        height: 50px;
        border: 2px solid black;
        text-align: center;
        bottom: 100px;
        color: black;
    }
    .botton_white{
        color: white;
        border: 2px solid white;
    }
    .botton01{
        border: 2px solid #75BA31;
        left: 30px;
    }
    .botton01:hover{
        border: 2px solid #5BA610;
    }
    .botton02{
        right: 110px;
    }
    .botton02:hover{
        border: 2px solid #F24B4B;
    }
}
.info_white{
    color: white;
}
